<template>
   <el-dialog :close-on-click-modal="false" :title="$t('configLazyLoad.qualityCheck.qualityCycleDetail')" @close="close" :visible.sync="visible">
    <div class="detail">
        <el-table
      :data="cycleDetailTable"
      size="mini"
      style="width: 100%">
        <el-table-column
          :label="$t('configLazyLoad.qualityCheck.sectionName')"
          prop="name">
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.qualityCheck.sectionStartDate')"
          prop="begin">
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.qualityCheck.sectionEndDate')"
          prop="end">
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'CycleDetail',
    data () {
      return {
        visible: false
      }
    },
    watch: {
      dialogVisible (cur) {
        this.visible = cur
      }
    },
    methods: {
      close () {
        this.$emit('close')
      }
    },
    props: {
      cycleDetailTable: {
        type: Array,
        default: function () {
          return []
        }
      },
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    beforeMount () {
      this.visible = this.dialogVisible
    }
  }
</script>

<style lang="stylus" scoped>
  .detail
    max-height 400px
    overflow auto
</style>
